<template>
    <div class="user">
        <van-nav-bar title="修改昵称" left-text="" right-text="" left-arrow @click-left="onClickLeft"
            style="background-color: #F5F5F5;">
            <template #left>
                <van-icon name="arrow-left" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>

        <div class="user-name">
            <van-field v-model="message" rows="4" autosize label="" type="textarea" placeholder="请输入新昵称"
                style="border-radius: 24px !important;" />
        </div>
        <div style="margin-top: 137px;">
            <van-button type="primary"
                style="width: 320px;height: 44px;border-radius: 50px;margin-left: 42px;background-color: #389138;font-size: 16px;"
                @click="save">保存</van-button>
        </div>
    </div>
</template>

<script>

// 、updateprofile

import { updateprofile } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
    name: 'User',
    components: {

    },
    data() {
        return {
            form: {
                nickname: '',
                password: '',
                mobile: ""
            },
            message: ""
        };
    },
    mounted() {
        this.message = this.userInfo.nickname
    },
    methods: {
        save() {
            if (!this.message) {
                this.$toast.fail("昵称不能为空")
                return
            }
            let obj = {
                nickname: this.message
            }
            updateprofile(obj).then((res) => {
                this.$route.params.nickname = this.message
                this.$router.back()

            })
        },
        editPhone() {
            //editPhone
            this.$router.push({
                path: '/editPhone'
            })
        },
        onClickLeft() {
            this.$route.params.nickname = this.message
            this.$router.back()
        },
    },

    computed: {
    ...mapGetters(['userInfo'])
  },
}
</script>

<style>
.user-name {
    width: 702px;
    height: 250px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px !important;
    margin-top: 42px;
    background-color: #fff;
}
</style>